<div id="UsersetList" class="OneContainer">
  <div class="row">
    <div class="col-md-12">
      <div class="Panel PanelBlack">
        <div class="PanelTitle">用户管理</div>
        <div class="PanelBody">
          <div class="row">
            <div class="col-sm-12 PanelItemF">
              <div class="PanelItem" v-on:click="createUser = !createUser">
                <span class="glyphicon glyphicon-plus" aria-hidden="true"></span>
                创建新用户
              </div>
              <div class="PanelItem" v-on:click="refresh()">
                <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>
                从内存刷新
              </div>
              <div class="PanelItem" v-on:click="reloadUser()">
                <span class="glyphicon glyphicon-repeat" aria-hidden="true"></span>
                重新从文件刷新用户
              </div>
            </div>
          </div>
          <div class="ItemTableList"></div>
          <div class="PanelItem ItemTableList" v-for="item of items">
            <div class="row">
              <div class="col-md-7">
                <div class="PanelItemInfo">
                  <h4>
                    <span v-if="TOOLS.isMaster(item.username)" class="color-high-red">[管理账号] </span>
                    <span v-else class="color-green">[普通账号] </span>
                    <span v-text="item.username"></span>
                  </h4>
                  <div>
                    <span v-if="item.data.online" class="color-green">正在线上</span>
                    <span v-if="!item.data.online" class="color-red">离线</span>
                    | 创建时间:
                    <span v-text="item.data.createDate"> </span>
                    | 最后上线:
                    <span v-text="item.data.lastDate"> </span>
                  </div>
                </div>
              </div>
              <div class="col-md-5 NextCol">
                <div class="PanelItemMuem">
                  <!-- <button class="btn btn-primary" v-on:click="">权限配置</button> -->

                  <button class="btn btn-success" v-on:click="toUserView(item.username)">详细信息</button>
                  <span style="margin-left: 8px"> | </span>
                  <button class="btn btn-primary" v-on:click="toAPIKey(item.username)">API Key</button>
                  <button class="btn btn-danger" v-on:click="toDeleteUser(item.username)">删除用户</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="row">
    <div class="col-lg-4">
      <div class="Panel PanelRed">
        <div class="PanelTitle">用户机制须知</div>
        <div class="PanelBody">
          <p class="color-high-red">以#符合开头的均是最高权限账号,请慎重创建</p>
          <p>我们尽可能的保证管理员与普通用户的数据安全性，但管理员是可以一定程度管理普通用户。</p>
          <p>普通用户只可以在规定的服务器内操作。</p>
          <p>普通用户无法创建，删除服务器和编辑服务器启动时参数配置。</p>
          <p>普通用户无法查看具体内存值与CPU具体信息，保证主机的信息。</p>
        </div>
      </div>
    </div>
    <div class="col-lg-8">
      <transition name="slide-fade">
        <div class="Panel PanelGreen" v-if="createUser">
          <div class="PanelItem">创建普通/高级用户</div>
          <div class="PanelBody">
            <div class="row">
              <div class="col-sm-6">
                <p>用户名 [字母 数字 下划线] (6~18位)</p>
                <div class="input-group input-group-sm">
                  <span class="input-group-addon"> 用户名 </span>
                  <input type="text" class="form-control" v-model="username" placeholder="用户名 [字母 数字 下划线] (6~18位)" />
                </div>
              </div>
              <div class="col-sm-6">
                <p>密码 [字母 数字 符号] (6~18位)</p>
                <div class="input-group input-group-sm">
                  <span class="input-group-addon"> 密码 </span>
                  <input type="text" class="form-control" v-model="password" placeholder="密码 [字母 数字 符号] (6~18位)" />
                </div>
              </div>
            </div>
            <p>准许的服务器，输入服务器名字，分别以空格分割</p>
            <div class="input-group input-group-sm">
              <span class="input-group-addon"> 准许的服务器 </span>
              <input type="text" class="form-control" v-model="allowedServer" placeholder="列如: 服务器名字A 服务器名字B 服务器名字C" />
            </div>
            <div class="row">
              <div class="col-lg-12">
                <p>当您的数据完善时，即可确认创建新的用户</p>
                <div class="Line"></div>
                <div class="" style="float: right; margin-top: 20px">
                  <button class="btn btn-primary" v-on:click="toRegisterUser()">创建新用户</button>
                  <button class="btn btn-warning" v-on:click="createUser =!createUser">取消</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </div>
</div>
<script>
  MI.rListener("onload", function () {
    // 定义页面地址
    TOOLS.definePage("template/userset", "userset/update", null);

    VIEW_MODEL.newVue("UsersetList", {
      el: "#UsersetList",
      data: {
        createUser: false,
        username: "",
        password: "",
        allowedServer: ""
      },
      methods: {
        toRegisterUser: function () {
          var allwoedServers = this.allowedServer.trim().split(" ");
          if (!TOOLS.isStdText(this.username)) {
            TOOLS.pushMsgWindow("用户名不合法！请重新输入！");
            return;
          }
          if (this.password.length < 6 || this.password.length > 18) {
            TOOLS.pushMsgWindow("密码长度不正确！");
            return;
          }
          var obj = {
            username: this.username,
            password: this.password,
            allowedServer: allwoedServers
          };
          WS.sendMsg("userset/create", JSON.stringify(obj), function () {
            PAGE.refresh();
          });
        },

        toDeleteUser: function (itemUsername) {
          var obj = {
            username: itemUsername
          };
          var result = confirm("您真的打算删除这个这个用户吗?");
          if (!result) return;
          WS.sendMsg("userset/delete", JSON.stringify(obj), function () {
            PAGE.refresh();
          });
        },
        refresh: function () {
          PAGE.refresh();
          TOOLS.pushMsgWindow("刷新完毕√");
        },

        reloadUser: function () {
          //命令服务器重新刷新
          WS.sendMsg("userset/reload", "", function () {
            PAGE.refresh();
          });
        },

        toUserView: function (_username) {
          RES.redirectPage("./template/component/user.html", "userset/view", _username);
        },
        toAPIKey: function (username) {
          // 弹出用户密匙设置窗口
          PAGE.username = username;
          TOOLS.popWind({
            style: {
              maxWidth: "600px",
              top: "24%"
            },
            title: "用户 " + PAGE.username + " 的密匙设置",
            template: "template/dialog/apikey.html"
          });
        }
      }
    });
  });

  MI.rListener("onend", function () {});
</script>
